<template>
  <div>
    <el-date-picker
      v-model="value"
      :type="type"
      align="right"
      unlink-panels
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      :picker-options="pickerOptions"
      value-format="yyyy-MM-dd"
      @input="$emit('input', $event)"
    >
    </el-date-picker>
  </div>
</template>



<script>
export default {
  props: {
    type: {
      type: String,
      default: "daterange",
    },
    pickerOptions: {
      type: Object,
      default: () => {
        var pickerOptions = {
          shortcuts: [
            {
              text: "最近一周",
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                picker.$emit("pick", [start, end]);
              },
            },
            {
              text: "最近一个月",
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                picker.$emit("pick", [start, end]);
              },
            },
            {
              text: "最近三个月",
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                picker.$emit("pick", [start, end]);
              },
            },
          ],
        };
        return pickerOptions;
      },
    },
  },
  data() {
    return {
      value: [],
    };
  },
  methods:{
    clear(){
      this.value = []
    }
  }
};
</script>